<template>
  <div class="Body">
    <el-dialog title="新增需求" :visible.sync="addDialogVisible" width="1500px">
      <need
        :contractList="contractIndex"
        :projectList="tabIndex"
        @closeAddDialog="addDialogVisible = false"></need>
    </el-dialog>
    <el-dialog title="更改需求" :visible.sync="updateDialogVisible" width="1300px">
      <change
        :projectName="projectName"
        :demandName="demandName"
        :contractName="contractName"
        @closeUpdateDialog="updateDialogVisible = false"></change>
    </el-dialog>

    <el-tabs tab-position='left' @tab-click="changeTab" v-model="activeName">
      <el-tab-pane v-for="(tab, index) in tabIndex" :key="index" :label="tab" :name="tab">
        <el-tabs style="width: 100%" type="card" v-model="staticShow">
          <el-tab-pane label="全部需求" name="全部需求">
            <demand-matrix-table
              @updateDialogVisible="showDialog"
              @updateDemand="updateDemand"
              :table="allTable">
            </demand-matrix-table>
            <el-pagination
              layout="prev, pager, next"
              :total="allTotalPage"
              @current-change="changeAllPage">
            </el-pagination>
          </el-tab-pane>

          <el-tab-pane label="未开始需求" name="未开始需求">
            <demand-matrix-table
              @updateDialogVisible="showDialog"
              @updateDemand="updateDemand"
              :table="unbeginTable">
            </demand-matrix-table>
            <el-pagination
              layout="prev, pager, next"
              :total="unbeginTotalPage"
              @current-change="changeUnbeginPage">
            </el-pagination>
          </el-tab-pane>

          <el-tab-pane label="已开始需求" name="已开始需求">
            <demand-matrix-table
              @updateDialogVisible="showDialog"
              @updateDemand="updateDemand"
              :table="beginTable">
            </demand-matrix-table>
            <el-pagination
              layout="prev, pager, next"
              :total="beginTotalPage"
              @current-change="changeBeginPage">
            </el-pagination>
          </el-tab-pane>

          <el-tab-pane label="已取消需求" name="已取消需求">
            <demand-matrix-table
              @updateDialogVisible="showDialog"
              @updateDemand="updateDemand"
              :table="quitTable">
            </demand-matrix-table>
            <el-pagination
              layout="prev, pager, next"
              :total="quitTotalPage"
              @current-change="changeQuitPage">
            </el-pagination>
          </el-tab-pane>

          <el-tab-pane label="已完成需求" name="已完成需求">
            <demand-matrix-table
              @updateDialogVisible="showDialog"
              @updateDemand="updateDemand"
              :table="finishTable">
            </demand-matrix-table>
            <el-pagination
              layout="prev, pager, next"
              :total="finishTotalPage"
              @current-change="changeFinishPage">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>

        <el-button type="primary" @click="addDialogVisible = true" style="position: absolute; right: 10px; top: 0px">
          新建需求
        </el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import DemandMatrixTable from "./DemandMatrixTable";
import Need from "./Need"
import Change from "./Change"
import qs from 'qs'

export default {
  name: "DemandMatrixBody",
  data() {
    return {
      tabIndex: [],
      contractIndex: [],
      addDialogVisible: false,
      updateDialogVisible: false,
      projectName: '',
      demandName: '',
      contractName: '',
      staticShow: '全部需求',
      allTable: [],
      beginTable: [],
      finishTable: [],
      unbeginTable: [],
      quitTable: [],
      allCurPage: 1,
      beginCurPage: 1,
      finishCurPage: 1,
      unbeginCurPage: 1,
      quitCurPage: 1,
      allTotalPage: 1,
      beginTotalPage: 1,
      unbeginTotalPage: 1,
      quitTotalPage: 1,
      finishTotalPage: 1,
      activeName: ''
    }
  },
  methods: {
    changeTab(tab) {
      this.projectName = tab.name
      this.refresh()
    },
    showDialog(demandName, contractName) {
      this.updateDialogVisible = true
      this.contractName = contractName
      this.demandName = demandName
    },
    changeAllPage(page) {
      this.allCurPage = page
      axios.get(this.$store.state.URL + "/Demand/findDemand", {
        params: {
          pageNum: page,
          pageSize: 10,
          state: -1,
          bgProject: this.projectName
        }
      }).then(
        response => (
          this.allTable = this.preAct(JSON.parse(response.data).data),
          this.allTotalPage = JSON.parse(response.data).number)
      )
    },
    changeBeginPage(page) {
      this.beginCurPage = page
      axios.get(this.$store.state.URL + "/Demand/findDemand", {
        params: {
          pageNum: page,
          pageSize: 10,
          state: 1,
          bgProject: this.projectName
        }
      }).then(
        response => (
          this.beginTable = this.preAct(JSON.parse(response.data).data),
            this.beginTotalPage = JSON.parse(response.data).number)
      )
    },
    changeFinishPage(page) {
      this.finishCurPage = page
      axios.get(this.$store.state.URL + "/Demand/findDemand", {
        params: {
          pageNum: page,
          pageSize: 10,
          state: 3,
          bgProject: this.projectName
        }
      }).then(
        response => (
          this.finishTable = this.preAct(JSON.parse(response.data).data),
            this.finishTotalPage = JSON.parse(response.data).number)
      )
    },
    changeUnbeginPage(page) {
      this.unbeginCurPage = page
      axios.get(this.$store.state.URL + "/Demand/findDemand", {
        params: {
          pageNum: page,
          pageSize: 10,
          state: 0,
          bgProject: this.projectName
        }
      }).then(
        response => (
          this.unbeginTable = this.preAct(JSON.parse(response.data).data),
            this.unbeginTotalPage = JSON.parse(response.data).number)
      )
    },
    changeQuitPage(page) {
      this.quitCurPage = page
      axios.get(this.$store.state.URL + "/Demand/findDemand", {
        params: {
          pageNum: page,
          pageSize: 10,
          state: 2,
          bgProject: this.projectName
        }
      }).then(
        response => (
          this.quitTable = this.preAct(JSON.parse(response.data).data),
            this.quitTotalPage = JSON.parse(response.data).number)
      )
    },
    refresh() {
      this.changeAllPage(this.allCurPage)
      this.changeBeginPage(this.beginCurPage)
      this.changeFinishPage(this.finishCurPage)
      this.changeUnbeginPage(this.unbeginCurPage)
      this.changeQuitPage(this.quitCurPage)
    },
    updateDemand(demand) {
      axios.put(this.$store.state.URL + "/Demand/updateDemand", qs.stringify(demand)).then(response =>
        function () {
          this.refresh()
        }
      )
    },
    sortMethod(obj1, obj2) {
      return obj2.proposeTime - obj1.proposeTime
    },
    preAct(data) {
      data.sort(this.sortMethod)
      let len = data.length
      let arr = []
      for (let i = 0; i < len; i++) {
        let item = data[i]
        if (item.proposeTime != null)
          item.proposeTime = this.getCurrentTime(item.proposeTime)
        arr.push(item)
      }
      return arr
    },
    getCurrentTime(time) {
      let date = new Date(time);//当前时间
      let month = this.zeroFill(date.getMonth() + 1);//月
      let day = this.zeroFill(date.getDate());//日
      let hour = this.zeroFill(date.getHours());//时
      let minute = this.zeroFill(date.getMinutes());//分
      let second = this.zeroFill(date.getSeconds());//秒

      //当前时间
      let curTime = date.getFullYear() + "-" + month + "-" + day
        + " " + hour + ":" + minute + ":" + second;

      return curTime;
    },
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return "0" + i;
      } else {
        return i;
      }
    },
    getContract() {
      this.$axios.get(this.$store.state.contractURL + "/returnName").then(res=>{
        this.contractIndex = res.data
        console.log(this.contactIndex)
      })
    },
    getProject() {
      this.$axios.get(this.$store.state.projectURL + "/project/getProjectIdAndName").then(res => {
        this.tabIndex = this.projectPreAct(res.data)
        console.log(this.tabIndex)
      })
    },
    projectPreAct(data) {
      let len = data.length
      let tabIndex = []
      for (let i = 1;i < len;i ++) {
        tabIndex.push(data[i].name)
      }
      return tabIndex
    }
  },
  components: {
    DemandMatrixTable,
    Need,
    Change
  },
  mounted: function () {
    this.getProject()
    this.getContract()
    this.projectSel = this.tabIndex[0]
    this.activeName = this.tabIndex[0]
    this.projectName = this.tabIndex[0]
    this.refresh()
  },
  watch: {
    tabIndex: function (val) {
      this.activeName = val[0]
    }
  }
}
</script>

<style scoped>
.Body {
  /*margin-top: 30px;*/
}
</style>
